<template>
  <div class="page">
    <div class="weui-search-bar" id="searchBar">
      <form class="weui-search-bar__form">
        <div class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
          <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <a @click="goSearch" class="weui-search-bar__label" id="searchText">
          <i class="weui-icon-search"></i>
          <span>搜索</span>
        </a>
      </form>
      <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
    <div class="filter weui-flex">
      <div @click="current = 0" :class="{current:current == 0}" class="weui-flex__item"><span>分类</span></div>
      <div @click="current = 1" :class="{current:current == 1}" class="weui-flex__item"><span>销量</span></div>
      <div @click="current = 2" :class="{current:current == 2}" class="weui-flex__item"><span>价格</span></div>
    </div>
    <div class="filtercon" v-if="current == 0">

      <div v-for="item in typeList" :key="item.id" @click="changeTypeList(item.id)">{{item.name}}</div>

    </div>
    <div class="filtercon" v-if="current == 1">

      <div v-for="item in sortList" :key="item.value" @click="saleProduct(item.value)">{{item.label}}</div>

    </div>
    <div class="filtercon" v-if="current == 2">

      <div v-for="item in sortList" :key="item.value"  @click="priceProduct(item.value)">{{item.label}}</div>
    </div>
    <div v-if="current != null" class="weui-mask" @click="current = null"></div>
    <div class="flex group">
      <template v-if="resultList.length">
      <div class="group_item" v-for="item in resultList" :key="item.id">
        <a  class="group_pic" style="height: 400rpx;" @click="goDetail(item.id)">
          <img :src="item.show_pic" mode="widthFix">
        </a>
        <div class="group_title">{{item.sp_name}}</div>
        <div class="price weui-flex">
          <div class="weui-flex__item price_now">¥{{item.xsdj*0.01}}</div>
          <div class="addcart" @click="addCart(item)"><img src="../../../static/images/gwc.png" mode="widthFix"></div>
        </div>
      </div>
      </template>
      <div v-if="!resultList.length" class="group_item" style="text-align: center;width: 100%">
        暂无数据
      </div>
    </div>
   <!--  <i-modal title="提示" :visible="visible1" @ok="goLogin" @cancel="handleClose">
         <view>您未登录,是否登录?</view>

     </i-modal> -->
     <mp-modal ref="mpModal" title="提示" content="您未登录,是否登录?" :showCancel="true" @confirm="goLogin" @cancel="handleClose"></mp-modal>
  </div>
</template>

<script>
import card from '@/components/card'
import * as appId from "@/utils/util"
import mpModal from 'mpvue-weui/src/modal';

export default {
  data () {
    return {
      current: null,
      resultList:[],
      result:[],
      pageNo:1,
      pageSize:10,
      choseMoreNum:"",//加载更多，0:分类,1:销量,2:价格
      choseMoreVal:"",
      visible1:false,//未登录
      searchName:"",
      typeList:[],
        changeId:0,
      sortList:[{
        label:'全部',
        value:''
      },{
        label:'由高到低',
        value:'down'
      },{
        label:'由低到高',
        value:'up'
      }]
    }
  },

  components: {
    card,
    mpModal
  },
  onHide(){
    wx.removeStorageSync('searchName')
  },
  onUnload(){
    wx.removeStorageSync('searchName')
  },
    onLoad(options){
        this.changeId=options.id;
        this.searchName=options.searchName;
        console.log(options)
    },
  onPullDownRefresh(){
    console.log('down')
    if(this.result.length){
      this.pageNo++;
    }
    if(this.choseMoreNum==0){
        if(this.changeId==2){
            this. getList(this.choseMoreVal,'','')
        }else{
            this.getAppletRecommendList(this.choseMoreVal,'','')
        }

    }else if(this.choseMoreNum==1){
        if(this.changeId==2){
            this. getList('',this.choseMoreVal,'')
        }else{
            this.getAppletRecommendList("",this.choseMoreVal,'')
        }

    }else  if(this.choseMoreNum==2){
        if(this.changeId==2){
            this. getList('','',this.choseMoreVal)
        }else{
            this.getAppletRecommendList("",'',this.choseMoreVal)
        }

    }else{
        if(this.changeId==2){
            this. getList('','','')
        }else{
            this.getAppletRecommendList('','','')
        }
    }
    // this.getAppleAssembleListFun()

  },

  onReachBottom () {
    wx.showNavigationBarLoading()
    console.log('pull')
    if(this.result.length){
      this.pageNo++;
    }
      if(this.choseMoreNum==0){
          if(this.changeId==2){
              this. getList(this.choseMoreVal,'','')
          }else{
              this.getAppletRecommendList(this.choseMoreVal,'','')
          }

      }else if(this.choseMoreNum==1){
          if(this.changeId==2){
              this. getList('',this.choseMoreVal,'')
          }else{
              this.getAppletRecommendList("",this.choseMoreVal,'')
          }

      }else  if(this.choseMoreNum==2){
          if(this.changeId==2){
              this. getList('','',this.choseMoreVal)
          }else{
              this.getAppletRecommendList("",'',this.choseMoreVal)
          }

      }else{
          if(this.changeId==2){
              this. getList('','','')
          }else{
              this.getAppletRecommendList('','','')
          }
      }
    // this.getAppleAssembleListFun()
    // wx.stopPullDownRefresh()
  },
  onShow(){
    wx.setNavigationBarTitle({
      title: "产品列表"
    })

    this.getAppletProType();
    if(this.changeId==2){
        this. getList('','','')
    }else{
        this.getAppletRecommendList('','','')
    }

  },
  methods: {
    goSearch(){
      let url=`/pages/search/main?id=${this.changeId}&searchName=${this.searchName}`;
      wx.navigateTo({ url})
    },
      getAppletRecommendList(productTypeId,sales,price){//精品推荐
          let that = this;
          this.$http.request({
              method: "post",
              url: "/v1.0/appletHome/appletRecommendList",
              body: {
                  "appid":appId.appId,
                  "phone":"",
                "pageNo":that.pageNo,
                "pageSize":that.pageSize,
                  "productTypeId":productTypeId,
                  "sales":sales,
                  "price":price,

              }
          }).then((data)=>{
              if(data.code==0){
                  that.result=data.result;
                  if (that.pageNo > 1) {

                      that.resultList.push(...data.result)
                      // that.resultList=Array.from(new Set( that.resultList))
                  }else{
                      that.resultList=data.result;
                  }
                  if(!data.length){
                      wx.stopPullDownRefresh();

                  }
              }

          })
      },
    goLogin(){
        let url="/pages/my/main";
        wx.reLaunch({ url:"/pages/my/main"})
            // this.$refs.mpModal.hide();

    },
    handleClose1(){
         this.$refs.mpModal.hide();
    },
    addCart(item){//添加购物车
       this.userInfo =wx.getStorageSync('userInfo')&&JSON.parse(wx.getStorageSync('userInfo'))
       if(this.userInfo) {
         this.phone=this.userInfo.mobileNo;
         this.userId=this.userInfo.baseUserId;
         //this. getList(0)
        this.addCartItem(item);


       }else{
       this.$refs.mpModal.show();
       }
    },
    addCartItem(item){
       let that=this;
      this.$http.request({
        method: "post",
        url: "/v1.0/appletOperat/appletAddCar",
        body: {
         	"userId":that.userId,
          "phone":that.phone,
          "productId":item.id,
          "appid":appId.appId

        }
      }).then((data)=>{
        if(data.code==0){

            wx.showToast({
            title: '添加成功',
            icon: 'success',
            duration: 2000
          })
        }else{
           wx.showToast({
             title: `${data.message}`,
             icon: 'none',
             duration: 2000
           })
        }
      })
    },
    goDetail(id){
      let url="/pages/productdetail/main?id="+id;
      wx.navigateTo({ url })
    },
    changeTypeList(id){//选择type
          console.log(id)
      this.choseMoreNum=0;
      this.choseMoreVal=id;

        if(this.changeId==2){
            this. getList(id,'','')
        }else{
            this.getAppletRecommendList(id,'','')
        }
      this.current=null
    },
    saleProduct(val){//销量
      this.choseMoreNum=1;
      this.choseMoreVal=val;
        if(this.changeId==2){
            this. getList('',val,'')
        }else{
            this.getAppletRecommendList('',val,'')
        }
      // this. getList('',val,'')
      this.current=null
    },
    priceProduct(val){//价格
      this.choseMoreNum=2
      this.choseMoreVal=val;

        if(this.changeId==2){
            this. getList('','',val)
        }else{
            this.getAppletRecommendList('','',val)
        }
      this.current=null
    },
    getAppletProType(){//产品分类
      let that=this;

      this.$http.request({
        method: "post",
        url: "/v1.0/appletHome/appletProType",
        body: {
          "appid":appId.appId,

        }
      }).then((data)=>{
        if(data.code==0){
          this.typeList=data.result;
        }
      })
    },
    getList(productTypeId,sales,price){
      let that=this;
      let searchName= wx.getStorageSync('searchName')
      this.$http.request({
        method: "post",
        url: "/v1.0/appletHome/appletProCenter",
        body: {
          "appid":appId.appId,
          "phone":"",
          "pageNo":that.pageNo,
          "pageSize":that.pageSize,
          "productTypeId":productTypeId,
          "sales":sales,
          "price":price,
          searchName:searchName
        }
      }).then((data)=>{
        if(data.code==0){
          that.result=data.result;
          if (that.pageNo > 1) {

            that.resultList.push(...data.result)
            // that.resultList=Array.from(new Set( that.resultList))
          }else{
            that.resultList=data.result;
          }
          if(!data.length){
            wx.stopPullDownRefresh();

          }
        }else{
          wx.showToast({
            title: `${data.message}`,
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
.price{
  line-height: 1.6em;
  margin: 0 0.3em;
}
.price .price_now{
  color:#E4393C;
  font-size:0.8em;
}
.price .addcart{
  width: 1.6em;
}
.price .addcart img{
  width: 1.6em;
  height: 1.6em;
}
.group{
  padding: 0 0.3em;
  margin-top:0.5em;
}
.group .group_item{
  width: 50%;
  float: left;
  margin-bottom: 0.6em;
}
.group .group_item a{
  margin: 0 0.3em;
}
.group .group_item img{
  width: 100%;
}
.group .group_item .group_pic{
  position: relative;
}
.group_title{
  margin: 0 0.3em;
  font-size: 0.8em;
  margin-top: 0.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.filter{
  font-size: 0.8em;
  height: 3em;
  line-height: 3em;
  background: #fff;
  border-bottom: 1px #eee solid;
  text-align: center;
}
.filter div span{
  background: url(../../../static/images/down.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1em;
  padding-right:1.3em;
}
.filter .current span{
  background: url(../../../static/images/up.png);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1em;
  color: #FF787E;
}
.weui-search-bar,.filter{
  position: relative;
  z-index: 9999;
}
.filtercon{
  position:absolute;
  top: 94px;
  background: #fff;
  left: 0px;
  right: 0px;
  padding: 0.8em;
  z-index: 9999;
}
.filtercon div{
  padding:0.4em 0;
  font-size: 0.8em;
}
.filtercon .selected{
  color: #FF787E;
}
</style>
